<template>
    <div>
        <mt-swipe :auto="3000">
            <!-- 谁使用此轮播图组件，谁为我们传递lunbolist -->
            <!-- 父组件向子组件传值 -->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <img :src="item.img" alt="" :class="{full: isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!-- 分析：商品评论中的轮播图宽高比失调 -->
    <!-- 1.首页中的图片， 使用的是100%比例-->
    <!-- 2.在商品详情页面中，需要使用高度100%，宽度自适应 -->
</template>

<script>
export default {
    props: ['lunbotuList', "isfull"]
}
</script>

<style lang="scss" scoped>
     .mint-swipe{
        height: 200px;

        // .mint-swipe-item:nth-child(1){
        //     background-color: red;
        // }

        .mint-swipe-item {
            text-align: center;
            // &:nth-child(1){
            //     background-color: yellow
            // }
            // &:nth-child(2){
            //     background-color: cyan
            // }
            // &:nth-child(3){
            //     background-color: red
            // }
            img {
                // width: 100%;
                height: 100%;
            }
        }
    }
    .full{
        width: 100%;
    }
</style>
